<template>
  <div>
    <div style="width: 1000px; display: flex;flex-wrap: wrap;" class="image_container">
        <div style="margin-right:10px;margin-bottom: 10px" v-if="isDesigner || mixEditable && (!limitNum || Number(limitNum) > this.srcList.length)">
          <el-upload
            list-type="picture-card"
            :show-file-list="false"
            accept="image/*"
            :auto-upload="false"
            :on-change="toBase64"
            >
            <i class="el-icon-plus"></i>
          </el-upload>
          <div v-if="description" style="color: #929191;">{{ description }}</div>
        </div>
        <div
          v-for="(src, index) in srcList"
          :key="index"
          :span="6"
          style="margin-right:10px;margin-bottom: 10px"
        >
          <div class="image_content" @mouseenter="imageEnter(src)" @mouseleave="imageLeave(src)">
            <el-image
              :src="src.url" 
              :preview-src-list="previewSrcList"
              style="height: 120px; width:120px">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div v-if="src.showAction" class="action">
              <i class="el-icon-delete fl" v-if="mixEditable" title="删除" @click="removeItem(index)"></i>
              <i class="el-icon-download fr" title="下载" @click="download(src.url)"></i>
            </div>
          </div>
        </div>
      <!-- </el-row> -->
    </div> 
  </div> 
</template>
  
<script>
export default {
  name: "imgsUpload",
  props: {
    limitNum: null,
    value: null,
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    description: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      fileList: [],
      srcList: [],
      separator: '&'
    };
  },
  computed: {
    // srcList: {
    //   get() {
    //     const list = this.value && this.value.split(this.separator) || []
    //     return list.map(item => {
    //       return {
    //         url: item
    //       }
    //     })
    //   },
    //   set(val) {
    //     this.$emit("input", val)
    //   },
    // },
    previewSrcList() {
      if (!this.srcList || !this.srcList.length) {
        return []
      } else {
        const val = this.srcList.map(i => i.url)
        this.$emit('input', val.join(this.separator))
        return val
      }
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
  },
  watch: {
    value: {
      immediate: true,
      handler(val) {
        const list = val && val.split(this.separator) || []
        this.srcList = list.map(item => {
          return {
            url: item
          }
        })
      }
    }
  },
  mounted() {
  },
  methods: {
    async init() {
      // let res = await this.search();
    },
    removeItem(index) {
      this.srcList.splice(index, 1)
    },
    toBase64(file, fileList){
      let imgFile = new FileReader();
      imgFile.readAsDataURL(file.raw);
      let that = this
      imgFile.onload = function () {
        // console.log(this.result,'===this.result')
        that.srcList.push({
          url: this.result,
        })
      }
    },
    download(item) {
      function dataURLtoBlob(dataurl) {
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
          }
          return new Blob([u8arr], { type: mime });
      }
      var myBlob = dataURLtoBlob(item);
      var url = URL.createObjectURL(myBlob)
      var a = document.createElement("a") //新建一个a链接
      a.setAttribute("href",url) // a链接的url为图片的url
      a.setAttribute("download",new Date().getTime() + '.png')
      a.setAttribute("target","_blank")
      a.click()
    },
    imageEnter(src) {
      console.log('enter')
      this.$set(src, 'showAction', true)
    },
    imageLeave(src) {
      console.log('leave')
      this.$set(src, 'showAction', false)
    }
  },
};
</script>
<style lang="scss" scoped>
  .image_container {
    margin: 8px 20px 20px;
  }
  ::v-deep .el-upload--picture-card {
    width: 120px;
    height: 120px;
    line-height: 120px;
  }
  .image_content {
    width: 120px;
    height: 120px;
    position: relative;
    .action {
      width: 120px;
      height: 40px;
      background-color:#3a3853e6;
      position: absolute;
      left: 0;
      bottom: 0;
      i {
        cursor: pointer;
        font-size: 20px;
        color: #fff;
        font-weight: 500;
        margin: 10px 20px;
        &:hover {
          color: #62a4e7;
        }
      }
    }
  }
</style>
  